<template>
	<!-- 头部搜索框 -->
	<view class="search">
		<view class="iconfont">&#xe6b1;</view>
		<view class="search_box">
			<view class="iconfont">&#xe62d;</view><input type="text" placeholder="搜索订单">
		</view>
	</view>
	<view id="jumpbar">
		<text @click="touchit" data-kind="待支付" :class="iskind=='待支付'?'active':''">待支付</text>
		<text @click="touchit" data-kind="待发货" :class="iskind=='待发货'?'active':''">待发货</text>
		<text @click="touchit" data-kind="待收货" :class="iskind=='待收货'?'active':''">待收货</text>
		<text @click="touchit" data-kind="已完成" :class="iskind=='已完成'?'active':''">已完成</text>
		<text @click="touchit" data-kind="已取消" :class="iskind=='已取消'?'active':''">已取消</text>
	</view>
	<!-- 渲染 -->
	<!-- 取消提示框 -->
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog mode="base" :content="iskind=='待支付'?'确定取消订单':'确认已收货？'" @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
	<!-- 物流框 -->
	<uni-popup ref="wuliu" type="dialog" mask-background-color="#FFFFFF">
		<view>
			<view><text style="text-align: center;">物流信息</text></view>
			<view>
				<uni-steps :options="list" direction="column" :active="2">
				</uni-steps>
			</view>
		</view>
	</uni-popup>


	<!-- 待支付 -->
	<view v-show="iskind=='待支付'?true:''" v-for="item in Arr" style="background-color: #E4E4E4;	padding-bottom: 30rpx;">
		<view class="major_content">
			<view class="first">
				<view> <text>订单编号：</text><text>{{item.ypdd_bianhao}}</text></view>
				<view> <text>{{item.ypdd_zhuangtai}}</text></view>
			</view>
			<view class="content" @click="go_dzf(item.ypdd_id)">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view class="price">
				<text>共{{item.yaopinshuliang}}件，合计：</text><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)}}</text>
			</view>
			<view class="btn">
				<view @click="open">取消订单</view>
				<view @click="go_afford(item.ypdd_id)">立即付款</view>
			</view>
		</view>
	</view>
	<!-- 待发货 -->
	<view v-show="iskind=='待发货'?true:''" v-for="item in Arr" style="background-color: #E4E4E4;	padding-bottom: 30rpx;">
		<view class="major_content">
			<view class="first">
				<view> <text>订单编号：</text><text>{{item.ypdd_bianhao}}</text></view>
				<view> <text>{{item.ypdd_zhuangtai}}</text></view>
			</view>
			<view class="content" @click="go_dfh(item.ypdd_id)">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view class="price">
						<text>共{{item.yaopinshuliang}}件，合计：</text><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)}}</text>
			</view>
			<view class="btn">
				<view @click="txfh">提醒发货</view>
				<view @click="go_refund(item.ypdd_id)">申请退款</view>
			</view>
		</view>
	</view>
	<!-- 待收货 -->
	<view v-show="iskind=='待收货'?true:''" v-for="item in Arr" style="background-color: #E4E4E4;padding-bottom: 30rpx;">
		<view class="major_content">
			<view class="first">
				<view> <text>订单编号：</text><text>{{item.ypdd_bianhao}}</text></view>
				<view> <text>{{item.ypdd_zhuangtai}}</text></view>
			</view>
			<view class="content" @click="go_dsh(item.ypdd_id)">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view class="price">
				<text>共{{item.yaopinshuliang}}件，合计：</text><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)}}</text>
			</view>
			<view class="btn">
				<view @click="go_wuliu">查看物流</view>
				<view @click="open(item.ypdd_id)">确认收货</view>
			</view>
		</view>
	</view>
	<!-- 已完成 -->
	<view v-show="iskind=='已完成'?true:''" v-for="item in Arr" style="background-color: #E4E4E4;	padding-bottom: 30rpx;">
		<view class="major_content">
			<view class="first">
				<view> <text>订单编号：</text><text>{{item.ypdd_bianhao}}</text></view>
				<view> <text>{{item.ypdd_zhuangtai}}</text></view>
			</view>
			<view class="content" @click="go_ywc(item.ypdd_id)">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view class="price">
				<text>共{{item.yaopinshuliang}}件，合计：</text><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)}}</text>
			</view>
			<view class="btn">
				<view @click="delDD(item.ypdd_id)">删除订单</view>
				<view @click="goshopcart">再次购买</view>
			</view>
		</view>
	</view>
	<!-- 已取消 -->
	<view v-show="iskind=='已取消'?true:''" v-for="item in Arr" style="background-color: #E4E4E4;	padding-bottom: 30rpx;">
		<view class="major_content">
			<view class="first">
				<view> <text>订单编号：</text><text>{{item.ypdd_bianhao}}</text></view>
				<view> <text>{{item.ypdd_zhuangtai}}</text></view>
			</view>
			<view class="content" @click="go_yqx(item.ypdd_id)">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view class="price">
					<text>共{{item.yaopinshuliang}}件，合计：</text><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)}}</text>
			</view>
			<view class="btn">
				<view @click="delDD(item.ypdd_id)">删除订单</view>
				<view @click="goshopcart">再次购买</view>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	// 引http
	import http from '../../utils/http.js';
	import {
		useStore
	} from 'vuex';

	let nowParams = '';
	export default {

		setup() {
			const {
				state,
				getters,
				commit,
				dispatch
			} = useStore()
			onLoad((e) => {
				nowParams = e.iskind
			})
			onMounted(() => {
				data.xrData()
			})

			let data = reactive({
				IP: 'http://localhost:8088',
				iskind: '待支付',
				Arr: [],
				id: '',
				xrData() {
					if (nowParams != undefined) {
						data.iskind = nowParams
					}
					http({
						url: '/getyaopindingdan',
						method: 'get'
					}).then((res) => {
						// 获取数据传到store再调用
						console.log(res.data.data)
						commit('dingdan/getData', res.data.data)
						data.getData(data.iskind)
					})
				},
				getData(zhuangtai) {
					data.Arr = []
					for (let i = 0; i < state.dingdan.dingdan.length; i++) {
						if (state.dingdan.dingdan[i].ypdd_zhuangtai == zhuangtai) {
							data.Arr.push(state.dingdan.dingdan[i])
						}
					}
				},
				list: [{
						title: '派送中',
						desc: '德邦快递员正在配送，请耐心等待'
					}, {
						title: '快件到达【北京朝阳区营业部】',
						desc: ''
					}, {
						title: '快件到达【北京顺义集散中心】',
						desc: ''
					}, {
						title: '快件在【华北陆运枢纽（天津）】已装车；准备发往【北京顺义集散中心】',
						desc: ' '
					},
					{
						title: '已揽件',
						desc: '包裹正在揽收'
					},
					{
						title: '已发货',
						desc: '卖家已发货'
					},
					{
						title: '订单开始处理',
						desc: ''
					}
				],
				// 取消订单对话框
				open(n) {
					console.log(n)
					data.id = n
					this.$refs.popup.open('center')
				},
				confirm() {
					if (data.iskind == '待支付') {
						uni.showToast({
							title: '已取消',
							duration: 2000
						});
					}
					if (data.iskind == '待收货') {
						console.log(data.id)
						http({
							url: '/querenshouhuo',
							method: 'post',
							data: {
								id: data.id
							}
						}).then((res) => {
							uni.showToast({
								title: '确认收货',
								duration: 2000
							});
							data.xrData()
						})
					}
				},
				// 提醒发货
				txfh() {
					uni.showToast({
						title: '提醒发货成功',
						duration: 2000
					});
				},
				// 删除订单
				delDD(n) {
					console.log(data.id)
					console.log(data.iskind)
					data.id = n
					console.log(data.id)
					// 删除订单请求
					http({
						url: '/shanchudingdan',
						method: 'post',
						data: {
							id: data.id
						}
					}).then((res) => {
						data.xrData()
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
					})


				},
				// 跳转条
				touchit: (ev) => {
					// 获取data-kind
					data.iskind = ev.target.dataset.kind
					data.getData(data.iskind)
					console.log(data.Arr)
				},
				go_afford: (n) => {
					uni.navigateTo({
						url: '/pages/querendingdan/querendingdan' 
					})
					for (let i = 0; i < state.dingdan.dingdan.length; i++) {
						if (state.dingdan.dingdan[i].ypdd_id == n) {
						state.shopcart.skipArr.push(state.dingdan.dingdan[i])
						}
					}
					let total=state.shopcart.skipArr[0].yaopinshuliang*parseInt(state.shopcart.skipArr[0].yp_jiage)
					// console.log(total)
					state.shopcart.totalprice=total

				},
				go_refund: (n) => {
					console.log(n)
					uni.navigateTo({
						url: '/pages/myorder/Refund?id=' + encodeURIComponent(n)
					})
				},
				go_wuliu() {
					// uni.navigateTo({
					// 	url: '/pages/myorder/Wuliu'
					// })
					console.log(this.$refs.wuliu)
					this.$refs.wuliu.open('center')
				},
				// 从图片跳转
				go_dzf: (n) => {
					uni.navigateTo({
						url: '/pages/myorder/dzf?id=' + encodeURIComponent(n)
					})
				},
				go_dfh: (n) => {
					uni.navigateTo({
						url: '/pages/myorder/dfh?id=' + encodeURIComponent(n)
					})
				},
				go_dsh: (n) => {
					uni.navigateTo({
						url: '/pages/myorder/dsh?id=' + encodeURIComponent(n)
					})
				},
				go_ywc: (n) => {
					uni.navigateTo({
						url: '/pages/myorder/ywc?id=' + encodeURIComponent(n)
					})
				},
				go_yqx: (n) => {
					uni.navigateTo({
						url: '/pages/myorder/yqx?id=' + encodeURIComponent(n)
					})
				},
				goshopcart: () => {
					uni.switchTab({
						url: '/pages/shopcart/shopcart'
					})
				}
			})

			return {
				...toRefs(data),
				onMounted
			}
		},

	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");

	// 头部搜索框
	.search {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid gray;
		align-items: center;

		.search_box {
			display: flex;
			border: 1px solid gray;
			border-radius: 20rpx;
			margin-left: 200rpx;

			.iconfont {
				width: 50rpx;
				margin-top: 8rpx;
				font-size: 40rpx;
			}
		}
	}

	// 跳转栏
	#jumpbar {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;

		text {
			padding-bottom: 20rpx;
			width: 144rpx;
		}
	}

	.active {
		border-bottom: 5rpx solid red;
	}

	// 主要内容
	.major_content {
		background-color: white;
		padding: 10rpx 20rpx 20rpx 20rpx;


		.first {
			justify-content: space-between;
			display: flex;

			// view:last-child {
			// 	padding-right: 20rpx;
			// }
		}

		.btn {
			display: flex;
			justify-content: flex-end;
			margin-left: 300rpx;
			margin-top: 40rpx;

			view:nth-child(1) {
				width: 150rpx;
				font-size: 30rpx;
				border: 1px solid black;
				margin-left: 20rpx;
				text-align: center;
				padding: 15rpx;
			}

			view:nth-child(2) {
				width: 150rpx;
				font-size: 30rpx;
				background-color: red;
				margin: 0 20rpx;
				text-align: center;
				padding: 15rpx;
				color: white;
			}
		}
	}

	.content {
		width: 300rpx;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.price {
		display: flex;
		justify-content: flex-end;

		text:nth-child(2) {
			color: red;
		}
	}
</style>
